<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .box {
        margin: 0 auto;
        width: 500px;
        background-color: #87ceeb;
      }
      .box > .nav {
        display: flex;
      }
      /* .box > .nav:hover + .main {
        height: 300px;
      } */
      .box > .nav > li {
        flex-grow: 1;
        text-align: center;
        cursor: pointer;
      }
      .box > .nav > li:hover {
        background-color: orange;
      }

      .main {
        display: flex;
        justify-content: space-around;
        height: 0;
        transition: height 0.3s;
        overflow: hidden;
      }
      .main > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="nav">
        <li>
          <span>手机</span>
        </li>
        <li>
          <span>电视</span>
        </li>
      </ul>

      <!-- 抽离公共组件 -->
      <ul class="main">
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90"
            width="200"
          />
          <p>4999</p>
          <p>小米手机</p>
        </li>
        <li>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90"
            width="200"
          />
          <p>4999</p>
          <p>小米手机</p>
        </li>
      </ul>
    </div>

    <script>
      let data = [
        [
          {
            src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c758eb7e0dce4307c62c47155519bc80.png?thumb=1&w=180&h=124&f=webp&q=90",
            text: "Xiaomi 13",
            price: "3999元起",
          },
          {
            src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90",
            text: "Redmi Note 12T Pro",
            price: "1499元起",
          },
        ],
        [
          {
            src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d3fec390debf1164c8df721e821cc28a.png?thumb=1&w=180&h=124&f=webp&q=90",
            text: "小米电视新EA系列",
            price: "799元起",
          },
          {
            src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07c66ae36f99daa4d5f613bb3d04ded6.png?thumb=1&w=180&h=124&f=webp&q=90",
            text: "电视",
            price: "5499元起",
          },
        ],
      ];

      console.log(data);

      let navList = document.querySelectorAll(".nav > li");
      let navMain = document.querySelector(".main");
      let box = document.querySelector(".box");

      navList.forEach((el, index) => {
        el.addEventListener("mouseenter", () => {
          // console.log('index', index);
          // console.log(data[index]); // 获取当前分类数组集合
          data[index].forEach((data, dataIndex) => {
            // console.log(data, dataIndex);
            // 设置图片、价格、xxx
            navMain.children[dataIndex].children[0].src = data.src;
            navMain.children[dataIndex].children[1].innerText = data.text;
            navMain.children[dataIndex].children[2].innerText = data.price;
          });
          // 显示navMain的高度
          navMain.style.height = "200px";
        });
      });

      box.addEventListener("mouseleave", () => {
        navMain.style.height = "0";
      });
    </script>
  </body>
</html>
